<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Steve's Trashy Adventure</title>
    <link href="/stylesheets/screen.css" media="all" rel="stylesheet" type="text/css"/>
    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script><script language="javascript" src="javascripts/jquery.hotkeys.js" type="text/javascript"></script><script language="javascript" src="javascripts/key_status.js" type="text/javascript"></script><script language="javascript" src="javascripts/util.js" type="text/javascript"></script><script language="javascript" src="javascripts/sprite.js" type="text/javascript"></script><script language="javascript" src="javascripts/sound.js" type="text/javascript"></script><script language="javascript" src="javascripts/player.js" type="text/javascript"></script><script language="javascript" src="javascripts/enemy.js" type="text/javascript"></script><script language="javascript" src="javascripts/shot.js" type="text/javascript"></script><script language="javascript" src="javascripts/background.js" type="text/javascript"></script>
  </head>
  <body>
    <script type='text/javascript'>
      //<![CDATA[
        var CANVAS_WIDTH = 800;
        var CANVAS_HEIGHT = 800;
        var FPS = 30;

        //create Canvas based on parameters
        var canvasElement = $("<canvas width='" + CANVAS_WIDTH +
          "' height='" + CANVAS_HEIGHT + "'></canvas");
        var canvas = canvasElement.get(0).getContext("2d");
        canvasElement.appendTo('body');

        setInterval(function () {
            update();
            draw();
        }, 1000 / FPS);
        

        //Background
        var playerShots = [];
        var enemyShots = [];
        enemies = [];		//collection of enemies
		
        function update() {
          if(keydown.space) {
            player.shoot();
          }

          if (keydown.left) {
            player.faceLeft();
            player.x -= 5;  //rotate the player  -PI/2 and move left
          }
        
          if(keydown.right) {
            //player.faceRight();
            player.x += 5;  //rotate the character PI/2 and move right
          }

          if (keydown.up) {
            //player.faceUp();
	        player.y -= 5;  //make the player face up and go up
		  }

	      if (keydown.down) {
            //player.faceDown();
	        player.y += 5;      //make the player face down and go down
		  }
		  
          player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);	//this restricts the player to the playable area
		  player.y = player.y.clamp(0, CANVAS_HEIGHT - player.height);
	
          playerShots.forEach(function(shot) {
            shot.update();
          });
        
          playerShots = playerShots.filter(function(shot) {
            return shot.active;
          });
          
          enemies.forEach(function(enemy) {
            enemy.update();
          });
        
          enemies = enemies.filter(function(enemy) {
            return enemy.active;
          });
        
          handleCollisions();
        
          if(Math.random() < 0.1) {
            enemies.push(Enemy());
          }	
        }; //UPDATE
        
        function draw() {
          canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);	//clears for current frame
          background.draw();
		  // Player
		  //canvas.save();
		  //canvas.translate(player.x,player.y);				//moves the canvas to (player.x,player.y)
		  //canvas.rotate(player.yaw*(Math.PI/3000));			
	      player.draw();
		  //canvas.restore();
		 
		  playerShots.forEach(function(shot) {
            shot.draw();
          });
		  
          // Enemies
          enemies.forEach(function(enemy) {
            enemy.draw();
          });
        }	//DRAW
		
        function collides(a, b) {
          return a.x < b.x + b.width &&
            a.x + a.width > b.x &&
            a.y < b.y + b.height &&
            a.y + a.height > b.y;
        }	//collides

        function handleCollisions() {
          //if a playerShot collides with an enemy, the enemy explodes and the shot disappears
          playerShots.forEach(function(shot) {
            enemies.forEach(function(enemy) {
              if(collides(shot, enemy)) {
                enemy.explode();
                shot.active = false;
              }
            });   //enemies.forEach
          });	//playerShots.forEach
        
          //If an enemy collides with the player, the player is hurt
          enemies.forEach(function(enemy) {
            if(collides(enemy, player)) {
              //enemy.explode();
              player.explode();
            }
          });   //enemies.forEach
        } //handle collisions
        
      //]]>
    </script>
  </body>
</html>
